.mix{
  width: 100%;
  height: 960px;
  background: #ffffff;
  .content{
    width: 870px;
    height: 566px;
    margin: 338px auto 0;
    position: relative;
    img{
      width: auto;
      height: 566px;
      // transition: all 0.2s ease; 
    }
    .pic1{
      margin-left: 330px;
    }
    .pic2{
      margin-left: -140px;
    }
    .pic3{
      margin-left: -100px;
    }
    .pic4{
      margin-left: -120px;
    }
    .pic5{
      margin-left: -120px;
    }
    .pic6{
      margin-left: -112px;
    }
  }
}
.mix2{
  width: 100%;
  height: 10.8em;
  background: url('/static/pc/images/mix/7.jpg') no-repeat center center;
  background-size: cover;
  position: relative;
  .mix2-container{
    width: 12em;
    height: 100%;
    margin: 0 auto;
  }
  img{
    position: absolute;
    left: 8.2em;
    top: 1.28em;
    // margin-top: 1.3em;
    // margin-left: 4.3em;
    // margin-left: 100%;
    width: 7.19em;
    height: 5.8em;
    opacity: 0;
    &.animate{
      animation: fadeInRight 0.8s ease-in-out;
      opacity: 1;
    }
  }
}
  @keyframes fadeInRight{
    0%{
      transform:scale(0.1);
      transform-origin: right center;
    }
    100%{
      transform: scale(1);
      transform-origin: right center;
    }
  }
  // @-webkit-keyframes fadeInRight{
  // 0%{opacity:0;
  // -webkit-transform:translateX(20px)}
  // 100%{opacity:1;
  // -webkit-transform:translateX(0)}
  // }
  // @-moz-keyframes fadeInRight{
  // 0%{opacity:0;
  // -moz-transform:translateX(20px)}
  // 100%{opacity:1;
  // -moz-transform:translateX(0)}
  // }
